<template>
  <div>
    <div class="shangpin">
      <van-icon name="arrow-left" @click="$router.go(-1)"/>
      <span>消息详情</span>
    </div>
    <div class="xiaobottom">
      <div class="xitong">
        <ul>
          <li class="li1">{{data.title}}</li>
          <li class="li2">{{data.createTime}}</li>
        </ul>
      </div>
      <div class="person">发布人：{{data.sourceName}}</div>
      <ul>
          <li>{{data.msgDate}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import {Getxiangqing,NowReader} from "@/request/api"
export default {
  props: ["records"],
  data() {
    return {
        data : []
    };
  },
  methods: {
    chanBox() {
      this.$emit("chanBox");
    }
  },
//   详情页数据
  created(){
    Getxiangqing({
        id: this.$route.query.id
    }).then(res=>{
        this.data = res.data
    }),
    // 标记为已读
    NowReader({
        id: this.$route.query.id
    }).then(res=>{
        console.log(res);
    })
  }
};
</script>
 
<style lang = "less" scoped>
.shangpin {
  background-color: #003399;
  color: #fff;
  padding: 0.166667rem 0.066667rem;
  text-align: center;
  span {
    vertical-align: 0.03rem;
  }
  .van-icon {
    float: left;
    font-size: 0.186667rem;
  }
}
.xiaobottom {
  background-color: #fff;
  margin-top: 0.133333rem;
  padding: 0.1rem 0.2rem;
  .xitong {
    margin-bottom: 0.056667rem;
    ul {
      display: flex;
      .li1 {
        font-size: 0.16rem;
        color: #000;
      }
      .li2 {
        margin-left: 1.8rem;
        color: #ccc;
      }
    }
  }
  .person {
    font-size: 0.133333rem;
    color: rgb(145, 143, 143);
    margin-bottom: 0.2rem;
  }
  ul {
    li {
      font-size: 0.133333rem;
      line-height: 0.213333rem;
      color: rgb(102, 100, 100);
    }
  }
}
</style>